<template>
	<div class="sidebar">
		<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router theme="dark">
			<template v-for="item in teacherItems" v-if="type == 3">
				<template v-if="item.subs">
					<el-submenu :index="item.index">
						<template slot="title">
							<i :class="item.icon"></i>{{ item.title }}</template>
						<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
						</el-menu-item>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index">
						<i :class="item.icon"></i>{{ item.title }}
					</el-menu-item>
				</template>
			</template>
			<template v-for="item in adminItems" v-if="(type == 1 && uniName !=='万航')  || (type == 2 && uniName !=='万航')">
				<template v-if="item.subs">
					<el-submenu :index="item.index">
						<template slot="title">
							<i :class="item.icon"></i>{{ item.title }}</template>
						<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
						</el-menu-item>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index">
						<i :class="item.icon"></i>{{ item.title }}
					</el-menu-item>
				</template>
			</template>

			<template v-for="item in venueItems" v-if="type == 4">
				<template v-if="item.subs">
					<el-submenu :index="item.index">
						<template slot="title">
							<i :class="item.icon"></i>{{ item.title }}</template>
						<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
						</el-menu-item>
					</el-submenu>
				</template>
				<template v-else>
					<el-menu-item :index="item.index">
						<i :class="item.icon"></i>{{ item.title }}
					</el-menu-item>
				</template>
			</template>

		</el-menu>

	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				type: 0,
				uniName: "",
				adminItems: [
					{
						icon: "el-icon-campus",
						index: "1",
						title: "校园系统",
						subs: [
							{
								index: "departManage",
								title: "院系管理"
							},
							{
								index: "teacherManage",
								title: "教师管理"
							},
							{
								index: "studentManage",
								title: "学生管理"
							},
							{
								index: "teacherList",
								title: "课堂点名"
							},
							{
								index: "announcement",
								title: "公告管理"
							}
						]
					},
					{
						icon: "el-icon-outClass",
						index: "2",
						title: "课外运动系统",
						subs: [
							{
								index: "sportConfig",
								title: "运动管理"
							},
							{
								index: "semesterTarget",
								title: "学期目标管理"
							},
							{
								index: "scoreManage",
								title: "运动成绩管理"
							},
							{
								index: "runManage",
								title: "跑步管理"
							},
							{
								index: "cheatManage",
								title: "作弊管理"
							},
							{
								index: "scoreImport",
								title: "导出管理"
							}
						]
					},
					{
						icon: "el-icon-appoinment",
						index: "4",
						title: "体测系统",
						subs: [
							{
								index: "history",
								title: "体测管理"
							},
							{
								index: "test_scoreManage",
								title: "体测成绩管理"
							}
						]
					},
					{
						icon: "el-icon-venueManage",
						index: "5",
						title: "场馆系统",
						subs: [
							{
								index: "venueManage",
								title: "场馆管理"
							},
							{
								index: "userManage",
								title: "用户管理"
							},
							{
								index: "orderManage",
								title: "订单管理"
							},
							{
								index: "outInVenueManage",
								title: "出入场管理"
							}
						]
					},
					{
						icon: "el-icon-attendance",
						index: "6",
						title: "考勤系统",
						subs: [
							{
								index: "setAttendance",
								title: "考勤设置管理"
							},
							{
								index: "attendanceManage",
								title: "考勤记录管理"
							}
						]
					}
				],
				teacherItems: [
					{
						icon: "el-icon-campus",
						index: "1",
						title: "校园系统",
						subs: [
							{
								index: "studentManage",
								title: "学生管理"
							},
							{
								index: "teacherList",
								title: "课堂点名"
							}
						]
					},
					{
						icon: "el-icon-outClass",
						index: "2",
						title: "课外运动系统",
						subs: [
							{
								index: "scoreManage",
								title: "运动成绩管理"
							},
							{
								index: "runManage",
								title: "跑步管理"
							},
							{
								index: "scoreImport",
								title: "导出管理"
							}
						]
					}
				],
				venueItems: [
					{
						icon: "el-icon-venueManage",
						index: "1",
						title: "场馆系统",
						subs: [
							{
								index: "venueManage",
								title: "场馆管理"
							},
							{
								index: "userManage",
								title: "用户管理"
							},
							{
								index: "orderManage",
								title: "订单管理"
							},
							{
								index: "outInVenueManage",
								title: "出入场管理"
							}
						]
					}
				]
			};
		},
		computed: {
			onRoutes() {
				return this.$route.path.replace("/", "");
			},
			...mapState({ user: state => state.user })
		},
		mounted() {
			this.userInfo();
		},
		methods: {
			userInfo() {
				this.type = this.user.type;
				this.uniName = this.user.uniName;
			}
		}
	};
</script>

<style>
	.sidebar {
		display: block;
		position: absolute;
		width: 180px;
		left: 0;
		top: 60px;
		bottom: 0;
		z-index: 150;
	}

	.sidebar>ul {
		height: 100%;
	}

	.el-icon-campus {
		width: 20px;
		position: relative;
		top: 5px;
		height: 20px;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("../../../static/img/campus_icon.png");
	}

	.el-icon-outClass {
		width: 20px;
		position: relative;
		top: 5px;
		height: 20px;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("../../../static/img/outClass_icon.png");
	}

	.el-icon-dataAnalysis {
		width: 20px;
		position: relative;
		top: 5px;
		height: 20px;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("../../../static/img/dataAnalysis_icon.png");
	}

	.el-icon-appoinment {
		width: 20px;
		position: relative;
		top: 5px;
		height: 20px;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("../../../static/img/appoinment.png");
	}

	.el-icon-venueManage {
		width: 20px;
		position: relative;
		top: 5px;
		height: 20px;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("../../../static/img/venueManage.png");
	}

	.el-icon-attendance {
		width: 20px;
		position: relative;
		top: 5px;
		height: 20px;
		display: inline-block;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("../../../static/img/attendance.png");
	}

	.el-menu {
		background: #333744;
	}

	.el-menu-item {
		background: #333744;
		height: 40px !important;
		line-height: 40px !important;
		font-size: 12px;
		color: #ffffff !important;
	}

	.el-menu-item:hover {
		background: #414556;
	}

	.el-submenu__title {
		font-size: 12px;
		color: #ffffff !important;
		height: 40px !important;
		line-height: 40px !important;
		border-bottom: 1px solid #333744 !important;
		background: #333744;
	}

	.sidebar .is-active {
		background: #414556;
		color: #ffffff;
	}

	.el-menu--dark .el-submenu .el-menu .el-menu-item:hover {
		color: #ffffff;
	}
</style>